<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="任务管理"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          创建任务
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>

      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip
          v-if="row.status === 'NORMAL'"
          key="1"
          content="暂停"
          placement="top"
        >
          <i
            class="el-icon-video-pause operate-button"
            @click="handleStatus(row, 'PAUSE')"
          ></i>
        </el-tooltip>
        <el-tooltip
          v-if="row.status === 'PAUSE'"
          key="2"
          content="恢复"
          placement="top"
        >
          <i
            class="el-icon-refresh-left operate-button"
            @click="handleStatus(row, 'NORMAL')"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="立即启动" placement="top">
          <i
            class="el-icon-video-play operate-button"
            @click="handleRun(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="编辑" placement="top">
          <i
            class="el-icon-edit operate-button"
            @click="handleShowAddEdit(row)"
          ></i>
        </el-tooltip>

        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>

    <!-- 创建/编辑页面 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="450px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :item="selectedRow"
        @close="showAddEdit = false"
      />
    </el-drawer>
  </div>
</template>
<script>
import AddEdit from './components/AddEdit'
export default {
  name: 'Users',
  components: { AddEdit },
  data() {
    return {
      showImport: false,
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'selection' },
        {
          label: '应用',
          prop: 'applicationId',
        },
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '执行流程',
          prop: 'procedureId',
        },
        {
          label: '执行时间',
          prop: 'cron',
        },

        {
          label: '状态',
          prop: 'status',
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 240,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'select',
            label: '',
            name: 'applicationId',
            placeholder: '应用',
            options: [],
          },
          {
            type: 'select',
            label: '',
            name: 'status',
            placeholder: '任务状态',
            options: [],
          },
          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '名称',
          },
        ],
      },
    }
  },

  methods: {
    handleStatus(row, val) {
      if (val === 'NORMAL') {
        this.$confirm('是否将恢复该任务，确定吗？', '恢复', {
          iconClass: 'el-icon-warning warning',
          center: true,
        })
          .then(() => {})
          .catch(() => {})
      } else {
        this.$confirm('是否将暂停该任务，确定吗？', '暂停', {
          iconClass: 'el-icon-warning warning',
          center: true,
        })
          .then(() => {})
          .catch(() => {})
      }
    },
    handleRun(row) {
      this.$confirm('是否立即启动该任务，确定吗？', '立即启动', {
        iconClass: 'el-icon-warning warning',
        center: true,
      })
        .then(() => {})
        .catch(() => {})
    },
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  applicationId: '148946854485172173',
                  channelId: 'SIMULATOR',
                  createTime: '2022-03-16T09:49:37.000+0000',
                  cron: '0 6 0 * * ?',
                  enterpriseId: '141598637888113837',
                  id: '218052603399898363',
                  name: 'abc',
                  procedureId: '218053127385910367',
                  reason: '',
                  status: 'NORMAL',
                  time: '2022-03-16T09:49:37.000+0000',
                  keywords: ['a', 'b', 'c'],
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    async handleDelete() {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
    },

    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowImport() {
      this.showImport = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
